<template>
	<div v-if="flag==1">
		<div class="search">
			<el-input v-model="stuname" placeholder="请输入姓名" />
			<el-input v-model="stunum" placeholder="请输入学号" />
			<el-input v-model="stuclass" placeholder="请输入班级" />
			<el-button @click="Searchinfo" class="searchBtn" type="info" :icon="Search">搜索</el-button>
			<el-button @click="add" class="addBtn" type="info" :icon="CirclePlus">添加</el-button>
		</div>
		<div class="chart">
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="stuName" label="姓名" />
				<el-table-column prop="stuNum" label="学号"  />
				<el-table-column prop="stuSex" label="性别" />
				<el-table-column prop="stuPhone" label="联系方式" />
				<el-table-column prop="stuAge" label="年龄" />
				<el-table-column prop="clazzName" label="班级" />
				<el-table-column label="操作">
					<template #default = "score">
						<span class="mya" style="color: #77b24c; width: 50px; cursor: pointer;" @click="goupdate(score.row)">修改</span>
						<span class="mya"style="color: #ff0000; width: 50px; cursor: pointer;" @click="del(score.row.stuId)" >删除</span>
					</template>
				</el-table-column>
				<el-table-column>
					<template #default = "score">
						<el-icon @click="more(score.row.stuId)" style="font-size: 20px;"><ArrowRight  style="color:#106ab1;"/></el-icon>
					</template>
				</el-table-column>
			  </el-table>
			  <el-pagination
				layout="prev,pager,next"
				:page-count="total"
				:page-size="pageSize"
				v-model:current-page="pageIndex"	
				@current-change="changePage"
			  ></el-pagination>
		</div>
		<!-- 删除提示框 -->
		<el-dialog v-model="centerDialogVisible"  width="400" center>
			<p style="text-align: center;">
			 确认删除该学生信息
			</p>
			<template #footer>
			  <div class="dialog-footer">
				<el-button style="background: #0f6ab1;" type="primary" @click="sureDel">确认</el-button>
				<el-button type="info" style="background: #999;"  @click="centerDialogVisible = false">取消</el-button>
			  </div>
			</template>
		</el-dialog>
	</div>
	<studentaddmore v-else-if="flag==2" :item="stuIds" @cheadd="goadd"></studentaddmore>
	<studentupdate v-else-if="flag==3" :item="info" @cheupdate="update"></studentupdate>
</template>

<script setup lang="ts">
	import { Search,CirclePlus,ArrowRight} from '@element-plus/icons-vue';
	import { ElMessage,ElMessageBox} from 'element-plus'
	import { ref } from 'vue';
	import {studentinfo,studentinfodel,studentsearchinfo,studentaddinfo} from "../api/zhy"
	import type {studentType,studentdelType,studentsearchType} from "../modal/zhy";
	import studentaddmore from '../components/studentaddmore.vue';
	import studentupdate from '../components/studentupdate.vue';
	let names=ref<string>()
	let stuid=ref<string>()
	let claid=ref<string>()
	let total=ref<number>(0)
	const pageIndex=ref<number>(1)
	const pageSize=ref<number>(5)
	let tableData=ref([])
	let stuname=ref<string|null>("")
	let stunum=ref<string|null>("")
	let stuclass=ref<string|null>("")
	let flag=ref(1)
	//学生信息
	const initstudentinfo=async()=>{
		let res=await studentinfo({
			pageIndex:pageIndex.value,
			pageSize:pageSize.value
		})
		// console.log(res)
		tableData.value =res.data
		total.value=Math.ceil(res.a/pageSize.value)
	}
	initstudentinfo()
	//搜索学生信息
	const Searchinfo:studentsearchType=async ()=>{
		let res=await studentsearchinfo({
			stuName:stuname.value,
			stuNum:stunum.value,
			clazzName:stuclass.value,
			pageIndex:pageIndex.value,
			pageSize:pageSize.value
		})
		console.log(res,"搜索信息")
		total.value=Math.ceil(res.a/pageSize.value)
		tableData.value = res.data
	}
	let stuIds=ref()
	//添加学生信息
	const add=()=>{
		stuIds.value="";
		flag.value=2;
	}
	const goadd=(bool)=>{
		flag.value=bool
		initstudentinfo()
	}
	//更多
	const more=(id)=>{
		// console.log(id)
		stuIds.value=id;
		flag.value=2;
	}
	//修改信息
	let info;
	const goupdate=(infoobj)=>{
		info=infoobj
		// console.log(info,"修改信息")
		flag.value=3;
	}
	const update=(bool)=>{
		flag.value=bool
		initstudentinfo()
	}
	//删除学生信息
	const centerDialogVisible = ref<boolean>(false)
	let stuId=ref()
	const del = (v)=>{
		centerDialogVisible.value=true
		stuId.value =v
	}
	//点击删除中的确定按钮
	const sureDel =async ()=>{
		centerDialogVisible.value=false
		let res=await studentinfodel({
		   	stuId:stuId.value
		 })  
		if(res==1){
			ElMessage.success("学生信息删除成功") 
		}
		initstudentinfo();
	}
	//点击分页器
	const changePage=(page)=>{
		//console.log(page)
		pageIndex.value=page;
		initstudentinfo()
	}
</script>

<style scoped lang="less">
	.search{
		width:100%;
		height: 60px;
		margin: 0 auto;
	}
	button:hover{
		cursor: pointer;
	}
	   .el-input{
	        width: 205px;
	        margin-right: 10px;
	        border: none;
	    }
	    .searchBtn{
	        background-color: #106ab1;
	        border: none;
	    }
	    .addBtn{
	        background-color: #00a0e9;
	        border: none;
	        float: right;
	        margin-right: 20px;
	    }
	.chart{
		width:100%;
		margin: 0 auto;
		.el-table{
			--el-table-border-color:none;
			--el-table-borde:none;
			--el-table-bg-color:none !important;    
			--el-table-header-bg-color:#f3f8fd;
			--el-table-header-text-color:#333 !important
		}
		.mya{
			display: inline-block;
			text-align: center;
		}
		:deep(.el-table .el-table__cell){
			text-align: center !important;
		}
		.colgroup{
			background: pink;
		}
		.el-pagination {
			justify-content: center;
		}
		:deep(.el-icon svg){
			color: #000;
		}
		:deep(.el-table tr){
			height: 50px;
			
		}
		:deep(tbody tr td){
			padding: 0;
			margin-top: 10px;
		}
		:deep(.el-table thead tr th){
			background-color:none !important;
			color: #000;
		}
		:deep(.el-table){
			--el-table-border-color:none;
			--el-table-borde:none;
		}
		::v-deep .el-table__body{
		  //-webkit-border-horizontal-spacing: 13px;  // 水平间距
		  -webkit-border-vertical-spacing: 9px;  // 垂直间距
		}
		:deep(.el-pagination) {
			--el-pagination-bg-color: none;
			background:none;
		}
	}
	// 分页样式
	    .el-pagination{
	        --el-pagination-bg-color:none;
	        --el-pagination-button-disabled-bg-color:none;
	        justify-content: center;
	    }
	.el-icon:hover{
		cursor: pointer;
	}
</style>